<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">

      <!-- 一级分类 -->
      <el-select v-model="courseVo.classGrade" placeholder="年级"  @change="classGradeChanged">
        <el-option
          v-for="grade in coursesAndGrade.grades"
          :key="grade"
          :label="grade"
          :value="grade"
        />
        <!-- key是唯一表标识，label是显示名，value是值 -->
      </el-select>

      <!-- 一级分类 -->
      <el-select v-model="courseVo.courseName" placeholder="所授课程" @change="courseChanged">
        <el-option
          v-for="course in coursesAndGrade.courseNames"
          :key="course"
          :label="course"
          :value="course"
        />
        <!-- key是唯一表标识，label是显示名，value是值 -->
      </el-select>
      

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>

    </el-form>

    <el-table :data="list" border fit highlight-current-row style="text-align:center">
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">{{ (page - 1) * limit + scope.$index + 1 }}</template>
      </el-table-column>

       <el-table-column prop="classGrade" label="年级" align="center"/>

      <el-table-column prop="stuName" label="学生姓名" align="center"/>

      <el-table-column prop="stuNumber" label="学号" align="center"/>

      <el-table-column prop="normalScore" label="平时成绩" align="center"/>

      <el-table-column prop="endScore" label="期末成绩" align="center"/>

      <el-table-column prop="totalScore" label="总成绩" align="center"/>

      <!-- <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="selectScore(scope.row.hiredate,scope.row.stuNumber,scope.row.stuName)"
          >成绩录入</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- -------------------------添加或修改学生信息弹框---------------------------------- -->

    <el-dialog title="成绩录入" :visible.sync="dialogFormVisible" :append-to-body="true" width="350px">
      <el-form :model="sysScore">
        <!-- <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="sysScore.stuName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item label="学生学号" :label-width="formLabelWidth">
          <el-input v-model="sysScore.stuNumber" autocomplete="off" style="width:300px"></el-input>
        </el-form-item> -->

        <el-form-item label="平时成绩" :label-width="formLabelWidth">
          <el-input-number v-model="sysScore.normalScore" :min="0" :max="100" label="平时成绩"></el-input-number>
        </el-form-item>

        <el-form-item label="期末成绩" :label-width="formLabelWidth">
          <el-input-number v-model="sysScore.endScore" :min="0" :max="100" label="期末成绩"></el-input-number>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="inputScore">确 定</el-button>
      </div>
    </el-dialog>

    <!-- -------------------------添加或修改学院信息弹框---------------------------------- -->

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
    <!-- 这里  @current-change="getList" 不用传页数，饿了么内部封装了，只需要调方法即可。这个方法加括号不行，分页换显示不了-->
  </div>
</template>


<script>
import org from "@/api/organization/organization.js"; //.js可以省略
import stu from "@/api/personnel/student";
import sc from "@/api/score/score";

export default {
  //2、写核心代码位置
  //data两种写法：
  // data:{
  // },
  data() {
    //定义数据变量和初始值
    return {
      coursesAndGrade:[],
      courseVo:{},
      //这里属性名可以自己起
      list: null, //查询之后接口返回集合
      total: 0,
      page: 1, //当前页
      limit: 30, //每页显示记录数
      studentDto: {}, //条件封装对象
      item: {},
      dialogFormVisible: false,
      // departmentList: {},
      // oneLevelList: {},
      // twoLevelList: {},
      // teacherDto: {},
      sysClassinfos:{},//所有专业下的班级
      sysScore:{},
      scoreInfoDto:{}//查询成绩录入回显
    };
  },
  created() {

    this.getTeacherCourse();
  },
  methods: {
    //获取当前老师有哪些课程
    getTeacherCourse(){
      sc.getTeacherCourse()
      .then(response => {
          this.coursesAndGrade = response.data.coursesAndGrade; 
        }) //请求成功
        .catch(error => {
          console.log(error);
        }); //请求失败
    },
    getList(page = 1) {
      this.page = page;

      sc
        .pageScore(this.page, this.limit, this.courseVo)
        .then(response => {
          //response接口返回的数据
          // console.log(response)
          //6、打印返回的测试数据
          this.list = response.data.records; //records是后端接口返回的值
          this.total = response.data.total;
          //   console.log(this.list);
          //   console.log(this.total);
        }) //请求成功
        .catch(error => {
          console.log(error);
        }); //请求失败
    }

  }
};
</script>
